<template>
    <div class="table">
        <Row class="divSearch">
            <Col v-show="userinfo.AreaCode=='530000000000'">
                <label class="searchLabel">所属地区:</label>
                <!-- <Cascader :data="AreaList" change-on-select @on-change='getStatsData'  class="searchInput"></Cascader> -->
                <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                    <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                    <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                    <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                </Select>
            </Col>
        <!--搜索框-->
            <Col>
                <label class="searchLabel">填报年度:</label>
                <Select v-model="searchModel.FillInYear" @on-change="getStatsData()" placeholder="请选择..." :label-in-value="true" clearable class="searchInput">
                    <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
            </Col>
            <Col >
                <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                    <Radio label="listShow" title="列表">列表</Radio>
                    <Radio label="barShow" title="饼图">柱状图</Radio>                                                                                  
                </RadioGroup> 
            </Col>
        </Row>
        <Row v-show="listShow">
            <Col>
                <table class="ContentTable">
                    <caption>
                        <div><span class="tableNum">表11——{{searchModel.FillInYear}}&nbsp;{{userinfo.AreaCode|omgAreaName}}&nbsp;蚕种场生产经营情况调查表</span>
                            <span class="tip">单位：人、万元、㎡、万张</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="2" style="width:50px;">序号</th>
                            <!-- <th rowspan="2" style="width:72px;">年份</th> -->
                            <th rowspan="2" style="width:180px;">蚕种场名称</th>
                            <th colspan="3">职工人数（人）</th>
                            <th rowspan="2">生产用房面积（m²）</th>
                            <th rowspan="2">自有桑园面积 (亩)</th>
                            <th colspan="2">桑蚕种产量(万张)</th>
                            <th colspan="2">销售蚕种量(万张)</th>
                            <th rowspan="2">固定资产(万元)</th>
                            <th rowspan="2">蚕种总产值(万元)</th>
                            <th rowspan="2">成本(万元)</th>
                            <th rowspan="2">利润(万元)</th>
                            <th rowspan="2">备注</th>
                        </tr>
                        <tr>
                            <th>人员总数</th>
                            <th>科技人员</th>
                            <th>高级职称</th>
                            <th>原种</th>
                            <th>杂交种</th>
                            <th>原种</th>
                            <th>杂交种</th>
                        </tr>
                        <tr v-if="datas.length>0">
                            <td style="width:50px;">{{1}}</td>
                            <!-- <td style="width:72px;">{{datas[0].year}}</td> -->
                            <td style="width:180px;">合计</td>
                            <td >{{datas[0].PersonalTotal|integer|formatCurrency}}</td>
                            <td >{{datas[0].KJRYNum|integer|formatCurrency}}</td>
                            <td >{{datas[0].GJZCNum|integer|formatCurrency}}</td>
                            <td >{{datas[0].SCYFMJ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].ZYSYMJ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].SCZCL_YZ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].SCZCL_ZJ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].CZXS_YZ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].CZXS_ZJ|decimal|formatCurrency}}</td>
                            <td >{{datas[0].FixedAssets|decimal|formatCurrency}}</td>
                            <td >{{datas[0].MulSilkwormProduct|decimal|formatCurrency}}</td>
                            <td >{{datas[0].Cost|decimal|formatCurrency}}</td>
                            <td >{{datas[0].Profit|decimal|formatCurrency}}</td>
                            <td >{{datas[0].Remark}}</td>
                        </tr>
                    </thead>
                    <tbody v-if="newDatas.length>0">
                        <tr v-for="(item,index) in newDatas" :key="item.year">
                            <!-- <td style="width:72px;">{{item.year}}</td> -->
                            <td style="width:50px;">{{index+2}}</td>
                            <td style="width:180px;">{{item.Name}}</td>
                            <td >{{item.PersonalTotal|integer|formatCurrency}}</td>
                            <td >{{item.KJRYNum|integer|formatCurrency}}</td>
                            <td >{{item.GJZCNum|integer|formatCurrency}}</td>
                            <td >{{item.SCYFMJ|decimal|formatCurrency}}</td>
                            <td >{{item.ZYSYMJ|decimal|formatCurrency}}</td>
                            <td >{{item.SCZCL_YZ|decimal|formatCurrency}}</td>
                            <td >{{item.SCZCL_ZJ|decimal|formatCurrency}}</td>
                            <td >{{item.CZXS_YZ|decimal|formatCurrency}}</td>
                            <td >{{item.CZXS_ZJ|decimal|formatCurrency}}</td>
                            <td >{{item.FixedAssets|decimal|formatCurrency}}</td>
                            <td >{{item.MulSilkwormProduct|decimal|formatCurrency}}</td>
                            <td >{{item.Cost|decimal|formatCurrency}}</td>
                            <td >{{item.Profit|decimal|formatCurrency}}</td>
                            <td >{{item.Remark}}</td>
                        </tr>
                    </tbody>
                </table>
            </Col>
        </Row>
        <Row v-show="barShow">
            <!--饼图-->
            <div  id="divBar" style="margin-right:10px;border:1px solid #D7DDE4; ">柱状图</div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("CSuserinfo").AreaCode),
            CurrentAreaName:'',
            CheckButton:'listShow',
            userinfo: this.GetlocaStorage("CSuserinfo"),//获取当前用户信息
            CultivarList: this.GetGroupDict("CSCultivar"),
            datas:[],//列表数据
            newDatas:[],//去除合计的数据集合
            //柱状图数据
            echartsItem:['桑蚕种产量(杂交种)','成本','利润'],
            XData:[],
            barList:[],
            SCZCL_ZJData:[],//销售蚕种量(杂交种)
            CostData:[],//成本
            ProfitData:[],//利润
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'MulSilkwormField',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: ''
            },
            clientHeight: window.innerHeight - 280,//表格默认高度
            listShow:true,//列表显示控制器
            barShow:false,//饼图显示控制器
        }
    },
    //高度计算
     mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 220;
            })()
        };
    },
    //方法
    methods: {
        //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
            }
        },
        //获取地区统计数据
        getStatsData(){
            var self = this;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            self.newDatas = [],self.XData=[],self.barList=[],self.SCZCL_ZJData=[],//销售蚕种量(杂交种)
            self.CostData=[],//成本
            self.ProfitData=[];//利润
            self.$http.post('MulSilkwormField/PostStatsList', self.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    if (res.data.model!=null&&res.data.model.length > 0) {
                        self.datas=res.data.model;//列表赋值
                        var len=res.data.model.length
                        for(var i=1;i<len;i++){
                            self.newDatas[i-1] = res.data.model[i];
                            self.XData.push(res.data.model[i].Name);
                            self.SCZCL_ZJData.push(res.data.model[i].SCZCL_ZJ);
                            self.CostData.push(res.data.model[i].Cost);
                            self.ProfitData.push(res.data.model[i].Profit);
                        }
                        self.barList.push(self.SCZCL_ZJData,self.CostData,self.ProfitData);
                        self.showEcharts();
                    }
                }
                else {
                    self.$Modal.error({
                    title: '提示信息',
                    content: res.data.message
                    });
                }
            });
        },
        DataExport(){
            //导出
           var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            window.open(this.$http.defaults.baseURL + "MulSilkwormField/GetStatsExcelData?FillInYear=" + self.searchModel.FillInYear+"&&AreaCode=" + self.searchModel.AreaCode+"&&Status=" + self.searchModel.Status);
        },
        //展示柱状图代码
        showEcharts(){
            //************************显示柱状图
            var self=this;
            var containerBar=document.getElementById('divBar');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBar.style.height = (window.innerHeight-240)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBar = myEcharts.init(containerBar, 'shine');
            var BarName='表11——'+self.searchModel.FillInYear+self.CurrentAreaName+'全年饲养蚕品种构成柱状统计图(单位:万张、万元)';
            var optionBar = self.GetBarOption(BarName,self.XData,self.echartsItem,self.barList,'bar');
            myBar.setOption(optionBar);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                myBar.resize();
            };
        }
    },
    //创建Vue页面方法
    created: function () { 
        this.getStatsData();      
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
